<template>
  <div id="app">
    <router-view/>
    <theme-picker/>
  </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker'
import {getNoticeAll, readNotice} from '@/api/system/user';

var that;
export default {
  name: 'App',
  components: {ThemePicker},
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  data() {
    return {
      data: [],
      user: this.$store.state.user,
      timer: null
    }
  },
  methods: {
    debounce() {
      getNoticeAll().then(res => {
        if (res.code == 200 && res.data && res.data.length > 0) {
          this.data = this.data.concat(res.data);
        }
      })
    },
    tip() {
      setInterval(() => {
        if (this.data.length > 0) {
          let item = this.data[0];
          this.data = this.data.slice(1);
          this.$notify({
            title: '新订单提醒',
            message: '销售' + (item.saleName ? item.saleName : '') + ',给您推送了一笔订单！点击立即查看！',
            duration: 5000,
            onClick: () => {
              // 点击到销售列表
              this.$router.push({path: '/deal/sell'});
            },
            onClose: () => {
              // 只提示一次，修改为已经阅读
              readNotice().then(res => {
              })
            }
          })
        }
      }, 5000);
    }
  },

  // 销毁
  beforeDestroy() {
    this.$ws.close();
  },

  created() {
    const that = this;
    that.tip();
    // 获取消息提醒
    setInterval(() => {
      if (that.$store && that.$store.state && that.$store.state.user && that.$store.state.user.id) {
        that.debounce();
      }
    }, 6000);

    // 初始化websocket
    this.$ws.initWebSocket();

    // 接受websokcet消息
    window.addEventListener('myEvent', res => {
      if (res.detail.message) {
        let message = JSON.parse(res.detail.message);
        console.log('接收到的消息：' + res.detail.message);
        that.$notify({
          title: message.magess,
          message: "账号：" + message.account,
          duration: 0,
          showClose: false,
          onClick: function (){
            if (message.magess == '输入短信验证码' || message.magess == '新设备登录验证' || message.magess == '短信验证码错误') {
              // 点击到销售列表
              that.$router.push({path: "/deal/recycle", query: {msg: message.account}});
            }
            this.close();
          }
        })
      }
    })
  }
}
</script>
<style lang="scss">

.el-notification__title {
  position: relative;

  &::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 3px;
    border-radius: 2px;
    height: 100%;
    background: #3A84FF;
    left: -10px;
  }
}

#app .theme-picker {
  display: none;
}

.hover-multi-line {
  max-width: 400px;
  white-space: pre;
}

.hover-slot-line {
  text-aligin: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-dialog__footer {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-button {
    background: #B5C2D8;
    color: #fff;
    border: none;

    &:nth-child(2) {
      background-color: #116BFF;
    }

    &:hover {
      opacity: .8;
    }
  }
}

//新增、修改 查看页面左右分区
.myfroms {
  height: 70vh;
  display: flex;
  justify-content: space-between;

  .mytxt {
    height: 100%;
    overflow: auto;
    width: 50%;
    padding-right: 10px;
  }

  .mystatu {
    height: 100%;
    overflow: auto;
    width: 45%;
  }
}

</style>
